<template>
  <el-steps class="steps" direction="vertical" finish-status="success">
    <el-step
      v-for="item in list"
      :key="item.id"
      :title="item.name"
      :status="getStatus(item)"
    >
      <template #description>
        <div class="info">
          <span>审核人：{{ item.auditorName }}</span>
          <el-divider direction="vertical" />
          <span>
            审核开始时间：{{
              item.auditStartTime
                ? $XEUtils.toDateString(
                    item.auditStartTime,
                    'yyyy-MM-dd HH:mm:ss'
                  )
                : ''
            }}
          </span>
          <el-divider direction="vertical" />
          <span>
            审核完成时间：{{
              item.auditEndTime
                ? $XEUtils.toDateString(
                    item.auditEndTime,
                    'yyyy-MM-dd HH:mm:ss'
                  )
                : ''
            }}
          </span>
        </div>
        <div v-if="item.auditStatus != -1" class="desc">
          <span class="status">
            {{
              dictStore.getDictLabelForValue('audit_status', item.auditStatus)
            }}
          </span>
          <span class="text">
            {{ item.auditOpinion }}
          </span>
        </div>
      </template>
    </el-step>
  </el-steps>
</template>

<script setup>
  import { getNodesByTempateGroup } from '@/api/project/audit'
  import { useDictStore } from '@/store/modules/dict'

  const props = defineProps({
    businessId: {
      type: [Number, String],
      default: '',
    },
    templateGroup: {
      type: String,
      default: '',
    },
    businessType: {
      type: Number,
      default: 1,
    },
  })

  const dictStore = useDictStore()

  const list = ref([])

  const getList = () => {
    getNodesByTempateGroup({
      templateGroup: props.templateGroup,
      businessType: props.businessType,
      businessId: props.businessId,
    }).then((res) => {
      if (res.code == 0 || res.code == 200) {
        list.value = res.data || []
      }
    })
  }

  const getStatus = (item) => {
    if (item.auditStatus == 1 && !item.isStopProcess) return 'success'
    if (item.auditStatus == 0) return 'process'
    if (item.auditStatus == -1) return 'wait'
    if ((item.auditStatus == 1 && item.isStopProcess) || item.auditStatus == 2)
      return 'finish'
  }

  getList()
</script>

<style lang="scss" scoped>
  .steps {
    // height: 300px;
    margin-top: 20px;

    :deep() {
      .el-step__main {
        display: flex;

        .el-step__title {
          flex: 0 0 200px;
        }

        .el-step__description {
          flex: 1;
          padding-bottom: 40px;
          padding-right: 0;

          .info {
            font-size: $base-font-size-default;
            margin-top: 6px;
            color: rgba(0, 0, 0, 0.4);
          }

          .desc {
            margin-top: 10px;
            font-size: $base-font-size-default;
            padding: 13px 20px;
            border-radius: 4px;
            background: #f7f8f9;

            .status {
              color: var(--el-color-success);
            }

            .text {
              margin-left: 20px;
              color: #606266;
            }
          }
        }
      }
    }
  }
</style>
